<template>
  <div>
    <div class="flex gap-4">
      <FormItem>
        <div class="label">{{ t["店名"] }}</div>
        <div class="w-[120px]">
          <SelectorListSelector @change="emit('search')" mode="select" v-model="query.filterId" />
        </div>
      </FormItem>
    </div>
    <div class="flex gap-4">
      <FormItem>
        <div class="label">{{ t["价签状态"] }}</div>
        <div class="w-[120px]">
          <a-select
            @change="emit('search')"
            v-model="query.status"
            :options="translateOptions(onlineOptions)"
          ></a-select>
        </div>
      </FormItem>
      <FormItem>
        <div class="label">{{ t["分辨率"] }}</div>
        <div class="w-[120px]">
          <ModelOptions @change="emit('search')" v-model="query.tagModel"></ModelOptions>
        </div>
      </FormItem>
      <FormItem>
        <div class="flex items-center gap-4">
          <span class="text-nowrap">{{ t["数据范围"] }}</span>
          <div class="w-[220px]">
            <Scope v-model="query.scope" @change="emit('search')" :include="['-', '1', '3']" />
          </div>
        </div>
      </FormItem>
    </div>
    <FormItem>
      <div class="label">{{ t["导出"] }}</div>
      <div>
        <a-button @click="exportFile"> {{ t["标签信息"] }} </a-button>
        <a-button @click="exportManifestFile">
          {{ t["设备清单"] }}
        </a-button>
        <a-button @click="exportRelationsFile">
          {{ t["绑定关系"] }}
        </a-button>
      </div>
    </FormItem>

    <FormItem>
      <div class="label">{{ t["升级闪灯"] }}</div>
      <Upgrade :selected-keys="selectedKeys" />
    </FormItem>

    <FormItem>
      <div class="label">{{ t["批量操作"] }}</div>
      <div class="flex gap-2">
        <BatchBindingOfTags />
        <a-button @click="emit('displayAssignment')">{{ t["分配"] }}</a-button>
      </div>
    </FormItem>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { downloadFile, manifestFile, relations } from "@/api/service/priceTag/priceTag";
import { onlineOptions } from "@/data/options/options";
import { IQuery } from "@/interface/IAxios";
import BatchBindingOfTags from "../components/BatchBindingOfTags.vue";
import Upgrade from "./upgrade.vue";

const t = translate("公共模块");
const emit = defineEmits(["reload", "search", "displayAssignment"]);
defineProps<{
  selectedKeys: string[];
  query: IQuery;
}>();

const exportFile = async () => {
  await downloadFile();
};
const exportManifestFile = async () => {
  await manifestFile();
};

const exportRelationsFile = async () => {
  await relations();
};
</script>
